import React, { useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Image, ScrollView } from 'react-native';
import Payment from '@/components/common/pay/Payment';
import Vipshow from '@/components/common/vip/vipshow';
import { useRouter } from 'expo-router';
import { useSelector } from 'react-redux';
import { RootState } from '@/store/paystore'

export default function Vip() {
    const router = useRouter();
    const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
    const { isVip, vipExpirationDate } = useSelector((state: RootState) => state.user);
    // 会员数据
    const vipOptions = [
        {
            id: 0,
            content: "vip",
            title: "限时特惠",
            description: "1个月",
            price: 48,
            originalPrice: 68,
            duration: "1个月",
        },
        {
            id: 1,
            content: "vip",
            title: "最受欢迎",
            description: "3个月",
            price: 68,
            originalPrice: 198,
            duration: "3个月",
        },
        {
            id: 2,
            content: "vip",
            title: "连续包年",
            description: "12个月",
            price: 188,
            originalPrice: 498,
            duration: "12个月",
        },
    ];

    const handlePress = (index: number) => {
        setSelectedIndex(index);
    };


    const handlePurchase = () => {
        if (selectedIndex !== null) {
            const selectedOption = vipOptions[selectedIndex];
            router.push({
                pathname: '/my/paymoney',
                params: {
                    content: selectedOption.content,
                    description: selectedOption.description,
                    price: selectedOption.price,
                    originalPrice: selectedOption.originalPrice,
                    duration: selectedOption.duration,
                }
            });
        }
    };

    const isVipActive = isVip && new Date() < new Date(vipExpirationDate);
    const formattedDate = new Date(vipExpirationDate).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
    });


    return (
        <ScrollView style={styles.all}>
            <View style={styles.header}>
                <View style={styles.headerLeft}>
                    <TouchableOpacity onPress={() => router.back()}>
                        <Image source={require('../../assets/images/backwhite.png')} style={styles.headerImg} />
                    </TouchableOpacity>
                    <Text style={styles.title}>我的会员</Text>
                    <Text style={styles.headerImg}></Text>
                </View>
                <View style={styles.headerRight}>
                    <View style={styles.headerRightView}>
                        <Image source={require('../../assets/images/touxiang.jpg')} style={styles.touxiangImg} />
                        <View style={styles.headerRightViewText}>
                            <View style={styles.headerRightViewTextTop}>
                                <Text style={styles.headerText}>用户名</Text>
                                {
                                    isVipActive ? <Image source={require('../../assets/images/gift/VIP (1).png')} style={styles.vipimg} />
                                        : <Image source={require('../../assets/images/gift/VIP (2).png')} style={styles.vipimg} />
                                }
                            </View>
                            <View style={styles.headerRightViewTextBottom}>
                                {
                                    isVipActive ? (
                                        <Text style={styles.headerText}>会员到期时间：{formattedDate}</Text>
                                    ) : <Text style={styles.headerText}>暂未开通会员</Text>
                                }
                            </View>
                        </View>

                    </View>
                    <Image source={require('../../assets/images/VIP.png')} style={styles.headervip} />
                </View>
            </View>

            <View style={styles.main}>
                <View style={styles.container}>
                    {vipOptions.map((option, index) => (
                        <TouchableOpacity key={option.id} onPress={() => handlePress(index)}>
                            <Payment
                                style={[
                                    styles.card,
                                    selectedIndex === index && styles.selectedCard,
                                ]}
                                content={option.content}
                                title={option.title}
                                description={option.description}
                                price={option.price}
                                originalPrice={option.originalPrice}
                                isSelected={selectedIndex === index}
                            />
                        </TouchableOpacity>
                    ))}
                </View>

                <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.button} onPress={handlePurchase}>
                        <Text>{isVipActive ? '续费' : '立即购买'}</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.warningContainer}>
                    <Image source={require('../../assets/images/waring.png')} style={styles.warningIcon} />
                    <Text style={styles.warningText}>有问题请联系24h在线客服</Text>
                </View>
            </View>

            <View>
                <Text style={styles.text}>会员专属特权</Text>
                <View style={styles.bottom}>
                    <Vipshow />
                </View>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    headerRightViewTextBottom: {
        marginTop: 5,
    },
    vipimg: {
        width: 14,
        height: 12,
        marginLeft: 5
    },
    headerRightViewTextTop: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    headerRightViewText: {
        marginLeft: 10,
    },
    headerRightView: {
        flexDirection: 'row',
        marginLeft: 10
    },
    touxiangImg: {
        width: 40,
        height: 40,
        borderRadius: 25,
    },
    text: {
        fontSize: 14,
        fontWeight: 'bold',
        marginLeft: 12,
    },
    bottom: {
        backgroundColor: '#fff',
        borderRadius: 10,
        margin: 10,
        shadowColor: '#000',
        height: 500,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        alignContent: 'center',
    },
    headerText: {
        color: '#ccc',
        fontSize: 12,
    },
    headervip: {
        width: 40,
        height: 40,
    },
    content: {
        fontSize: 12,
        fontWeight: 'bold',
    },
    headerRight: {
        backgroundColor: 'rgb(18, 87, 104)',
        width: 315,
        height: 60,
        marginTop: 30,
        marginLeft: 20,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        color: 'white'
    },
    headerLeft: {
        marginTop: 12,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    headerImg: {
        width: 20,
        height: 15,
        marginLeft: 20,
    },
    header: {
        width: '100%',
        height: 150,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        backgroundColor: 'rgb(24, 55, 53)',
    },
    warningContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
    },
    warningText: {
        fontSize: 10,
    },
    warningIcon: {
        width: 15,
        height: 15,
        marginRight: 5
    },
    all: {
        backgroundColor: 'rgb(249, 249, 249)',
        height: '100%',
    },
    container: {
        marginTop: 20,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    card: {
        width: 105,
        borderWidth: 1,
        borderColor: '#ccc', // 默认边框颜色
    },
    selectedCard: {
        borderColor: '#00a676', // 选中时的边框颜色
    },
    main: {
        backgroundColor: '#fff',
        borderRadius: 10,
        margin: 10,
        shadowColor: '#000',
        height: 300,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        alignContent: 'center',
        marginTop: -30,
    },
    buttonContainer: {
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'rgb(38, 235, 218)',
        padding: 10,
        borderRadius: 20,
        alignItems: 'center',
        marginTop: 50,
        width: 200,
    }
});










